<template>
  <div id="articleCRUD">
    <el-table
        :data="tableData"
        border
    >
      <el-table-column
          prop="id"
          label="编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180"></el-table-column>
      <el-table-column
          prop="gender"
          label="性别"
          width="180"></el-table-column>
      <el-table-column
          prop="birthday"
          label="生日"
          width="180"></el-table-column>
      <el-table-column
          prop="email"
          label="email"
          width="180"></el-table-column>
    </el-table>

    <el-row type="flex">
      <h3>用户文章管理</h3>
    </el-row>

    <el-row type="flex">
      <el-button type="primary" @click="dialogVisible = true">
        添加文章
      </el-button>
    </el-row>

    <el-dialog
        title="添加文章"
        :visible.sync="dialogVisible"
        width="50%"
        height="300px"
        :before-close="handleClose">
      <el-row>
        <el-input placeholder="请输入标题" v-model="title">
          <template slot="prepend">文章标题</template>
        </el-input>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-input placeholder="请输入文章内容" v-model="description">
          <template slot="prepend">正文</template>
        </el-input>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addArticle">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
        title="修改文章"
        :visible.sync="dialogVisible2"
        width="50%"
        height="300px"
        :before-close="handleClose">
      <el-row>
        <el-input placeholder="请输入标题" v-model="title2">
          <template slot="prepend">文章标题</template>
        </el-input>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-input placeholder="请输入文章内容" v-model="description2">
          <template slot="prepend">正文</template>
        </el-input>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="handleUpdate">确 定</el-button>
      </span>
    </el-dialog>

    <el-table
        :data="articleData.filter(data => !search || data.title.toLowerCase().includes(search.toLowerCase()))"
        style="width: 100%; margin-top: 10px"
        border
        stripe
        :max-height="400"
        empty-text="暂无数据"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column
          prop="id"
          label="文章编号"
          width="180">
      </el-table-column>

      <el-table-column
          prop="title"
          label="文章标题">
      </el-table-column>
      <el-table-column
          prop="description"
          label="文章内容">
      </el-table-column>

      <el-table-column label="操作">
        <template slot="header" slot-scope="scope">
          <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="editArticle(scope.$index, scope.row)">编辑</el-button>
          <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm = "deleteArticle(scope.$index, scope.row)"
          >
            <el-button
                slot="reference"
                size="mini"
                type="danger"
            >删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
export default {
  name: "ArticleCRUD",
  data() {
    return {
      id: this.$route.query.id,
      articleId: '',

      search: "",
      tableData: [],
      articleData: [],

      dialogVisible: false,
      title: "",
      description: "",

      dialogVisible2: false,
      title2: "",
      description2: ""
    };
  },
  created() {
    this.getAll();
  },
  methods: {
    getAll(){
      this.$http.get("/user/findById?id="+this.id).then((response)=>{
        let tableData = {
          id: response.data.extend.user.id,
          name: response.data.extend.user.name,
          gender: response.data.extend.user.gender,
          birthday: response.data.extend.user.birthday,
          email: response.data.extend.user.email
        };
        this.tableData = [];
        this.tableData.push(tableData);
        this.articleData = response.data.extend.user.articles;
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    editArticle(index,row) {
      this.dialogVisible2 = true;
      this.articleId = row.id;
      this.title2 = row.title;
      this.description2 = row.description;

    },
    handleUpdate() {
      this.dialogVisible2 = false;
      //封装article
      let article = {
        id: this.articleId,
        title: this.title2,
        description: this.description2,
        uid: this.id
      };
      this.$http.post("/article/update",article).then((response)=>{
        if(response.data.code){
          this.$message({
            message: "恭喜您！" + response.data.extend.message,
            type: 'success'
          });
          this.getAll();
        }
        else {
          this.$message({
            message: "很抱歉！" + response.data.extend.message,
            type: 'error'
          })
        }
      });
    },
    deleteArticle(index,row) {
      this.$http.delete("/article/delete",{params:{id: row.id}}).then((response)=>{
        if(response.data.code){
          this.$message({
            message: "恭喜您！" + response.data.extend.message,
            type: 'success'
          });
          this.getAll();
        }
        else {
          this.$message({
            message: "很抱歉！" + response.data.extend.message,
            type: 'error'
          })
        }
      });
    },
    addArticle() {
      this.dialogVisible = false;
      //封装article
      let article = {
        title: this.title,
        description: this.description,
        uid: this.id
      }
      //添加文章
      this.$http.post("/article/add",article).then((response)=>{
        if(response.data.code){
          //添加成功
          this.$message({
            message: "添加成功！！",
            type: 'success'
          });
          //刷新文章表格
          this.getAll();
        }
        else {
          this.$message({
            message: "很抱歉！添加文章失败！",
            type: 'error'
          })
          return false;
        }
      });

    }
  }
}
</script>

<style scoped>

</style>